<template>
  <div class="person-page">
    <a-row :gutter="24" class="row-item">
      <a-col :span="16">
        <div class="col-item" style="border: 0">
          <ProjectDisplay></ProjectDisplay>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="col-item">
          <Work></Work>
        </div>
      </a-col>
    </a-row>
    <a-row class="row-bottom" :gutter="24" style="margin-top: 24px">
      <a-col :span="16">
        <div class="col-item">
          <Files></Files>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="col-item">
          <Title title="项目位置"></Title>
          <Amap></Amap>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import Amap from './components/amap/index.vue';
  import Work from './components/work/index.vue';
  import Files from './components/files/index.vue';
  import Title from './components/title/index.vue';
  import ProjectDisplay from './components/project-display/index.vue';
</script>

<style scoped lang="less">
  .person-page {
    //border: 1px solid red;
    height: calc(100vh - 190px);
    .row-item {
      .col-item {
        height: calc(42vh - 80px);
      }
    }
    .row-bottom {
      .col-item {
        height: calc(55vh - 110px);
      }
    }
  }
  .col-item {
    //height: 36vh;
    border: 1px solid var(--color-border);
  }
</style>
